<?xml version="1.0" encoding="utf-8" ?>

[#include "/WEB-INF/pages/common/taglibs.ftl"]

[#macro _script]
	<script type="text/javascript">
	
		var base = (function(){
			// 事件绑定
			function _addEventListeners() {
				$('a[act=edit]').click(function(){
					var id = $(this).parent().attr('tval');
					[@c.url var="editUrl" value='/manage/Category_edit.action' scope="page"]
						[@c.param name="channelId" value="${channelId}"/]
					[/@c.url]
					
					window.location = "${editUrl}&id=" + id;
				})
			
				$('a[act=delete]').click(function(){
					var id = $(this).parent().attr('tval');
					$( "#delete-confirm" ).dialog({
						resizable: false,
						height:160,
						width:260,
						modal: true,
						buttons: {
							"删除": function() {
								[@c.url var="backUrl" value='/manage/Category_list.action' scope="page"]
									[@c.param name="currentPage" value="${currentPage}"/]
								[/@c.url]
								window.location = "[@c.url value='/manage/Category_delete.action?cascade='/]" + $('#cascade').attr("checked") + "&id=" + id + "&backurl=${backUrl}";
								$( this ).dialog( "close" );
							},
							"取消": function() {
								$( this ).dialog( "close" );
							}
						}
					});
					$( "#delete:ui-dialog" ).dialog( "destroy" );
					return false;
				})
				
				// Create jqxExpander
            	$('.jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', height: '500px', theme: base.config.theme });
            	
            	// 必须先渲染控件,后绑定事件
				//频道切换的select切换事件
				$('#channelSelect').change(function() {
					var id = $(this).val();
					$('form[name=channelForm]').attr('action', "[@c.url value='/manage/Category_list.action'][/@c.url]");
					$('form[name=channelForm]').submit();
				})
			}
			// 页面渲染
			function _treeRender () {
				// Create jqxTree
				$('#jqxTree').jqxTree({height:'450px;', theme: base.config.theme });
        		$('#jqxTree').unbind().bind('select', function (event) {
	                var args = event.args.element.outerHTML;
	                var id = $('a', $(args)).attr('ckey');
					//使用一个ajax请求,去渲染body部分
					//参数注意：ajax代表是一个ajax请求;渲染本页的body,但在装饰器中为一个div体
					//所以在装饰器页里,将内容页放入不同位置,但内容页的ajax不会改变.
	                $.get(base.config.url, {'id':id, 'ajax':true, 'piece':true}, function(data){
	                	$('#siteFunctionView').html(data);
	                })
	            });
			};
			return {
                config: {
                    theme: null
                },
                init: function () {
                    _addEventListeners();
                    _treeRender();
                }
			}
		}());
	
		$(function(){
			base.config.url = "[@c.url value='/manage/Category_list.action?channelId=${channelId}'][/@c.url]";
			base.config.renderTo = "#categoryList";
			base.config.theme = getTheme();
            //Initializing the form
        	base.init();		
		})
	</script>
[/#macro]

[#if piece==true]
	[@_script /]
	<!--设置提交行为-->
	[#assign act="save" /]
	[#assign renderTo="#categoryList" /]
	[#include "/WEB-INF/pages/manage/_categoryList.ftl" /]
[#else]
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Insert title here</title>
		<meta name="menu" content="CategoryMenu"/> 
		<meta name="heading" content="heading"/>
		
		<style type="text/css">
			.category {
				padding:0;
				margain:0;
			}
			.category_tree {
				width:240px;
				/*height:500px;*/
				float:left;
				margin-left:2px;
			}
			.category_list {
				/*height:500px;*/
				margin-left:252px;
			}
		</style>
		[@_script /]
	</head>
	<body id="body">
		<div class="category">
			<div class="category_tree">
		    	[@s.action name="Category_tree" executeResult="true" namespace="/manage"]
		    		[@s.param name="ajax" value="true" /]
					[@s.param name="channelId" value="channelId" /]
		    	[/@s.action]
		    	<ul id="categoryTree" class="ztree"></ul>
			</div>
			<div class="category_list" id="categoryList">
				<!--设置提交行为-->
				<div>
					<form action="" method="post">
						<table>
							<tr>
								<td><input name="article.title" type="text" value=""/></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						</table>
					</form>
				</div>
				[#assign act="save" /]
				[#assign renderTo="#categoryList"]
				[#include "/WEB-INF/pages/manage/_categoryList.ftl"]
			</div>
			<div style="clear: both;"></div>
		</div>
	</body>
	</html>
[/#if]